import { styled } from "@linaria/react"
import { Text, View } from "@tarojs/components"

export default function RatingStars({ rating, numOfScore }: { rating: number; numOfScore?: number }) {
  return (
    <RatingStarsView>
      <GrayStar>★★★★★</GrayStar>
      <OrangeStar style={{clipPath: `inset(0 ${(5 - rating) * 20}% 0 0)`}}>★★★★★</OrangeStar>
      <Placeholder>★★★★★</Placeholder>
      { numOfScore && <RatingText>{ rating } ({numOfScore} 人评分)</RatingText>}
    </RatingStarsView>
  )
}

const RatingStarsView = styled(View)`
  width: fit-content;
  font-size: 20px;
  
  /* display: flex;
  align-items: center; */
`

const OrangeStar = styled(Text)`
  position: absolute;
  width: fit-content;
  color: orange;
`

const GrayStar = styled(Text)`
  position: absolute;
  width: fit-content;
  color: gray;
`

const Placeholder = styled(Text)`
  color: transparent;
  width: fit-content;
`

const RatingText = styled(Text)`
  margin-left: 10px;
  line-height: 32px;
  font-size: 25px;
  font-weight: bold;
  color: orange;
`